<script setup>
import { OpenTag } from '@/components/index.js'

const route = useRoute()
const searchValue = ref('')
const historyList = ref([])

function getHistoryList() {
  console.log('获取历史记录', route.params)
  historyList.value.push({
    date: '2025.04.21',
    detail: [
      {
        type: 1,
        id: 1,
        title: `我的2024年终总结——不如摸鱼去`,
        summary: `这个名字来源于我非常喜欢的许嵩的专辑《不如吃茶去》。我希望自己能够偶尔脱离忙碌的生活，享受一些轻松的时光，不再日复一日地做马牛。同时，我也希望大家能够在自己的领域中，创造出属于自己的一片天地。`,
        cover: `https://img2.baidu.com/it/u=1115522663,3151405869&fm=253&fmt=auto&app=138&f=JPEG?w=1067&h=800`,
        tags: [
          { id: 1, name: '前端' },
          { id: 2, name: '前端总结前端总结前端总结前端总结' },
        ],
        author: {
          id: 1,
          nickName: '不如摸鱼去',
        },
        articleMetric: {
          viewCount: 103,
          collectCount: 2,
          likeCount: 1,
          commentCount: 121,
        },
        isLike: true,
        isCollect: false,
      },
      {
        id: 2,
        title: `我的2024年终总结——不如摸鱼去`,
        summary: `这个名字来源于我非常喜欢的许嵩的专辑《不如吃茶去》。我希望自己能够偶尔脱离忙碌的生活，享受一些轻松的时光，不再日复一日地做马牛。同时，我也希望大家能够在自己的领域中，创造出属于自己的一片天地。`,
        tags: [
          { id: 1, name: '前端' },
          { id: 2, name: '前端总结前端总结前端总结前端总结' },
        ],
        author: {
          id: 1,
          nickName: '不如摸鱼去',
        },
        articleMetric: {
          viewCount: 103,
          collectCount: 2,
          likeCount: 1,
          commentCount: 121,
        },
        isLike: true,
        isCollect: false,
      },
    ],
  })
}
getHistoryList()

function toAuthor(id, event) {
  event.preventDefault()
  event.stopPropagation()
  console.log('toAuthor', id)
}
</script>

<template>
  <AppPage :main-style="{ marginTop: '20px' }" full>
    <AppCard bordered class="ma max-w-880 wh-full border-rd-5 px-20">
      <div class="my-20 h-60 flex items-center justify-between">
        <span class="font-size-22 fw-600">浏览记录</span>
        <div>
          <el-input
            v-model="searchValue"
            style="max-width: 600px"
            placeholder="搜索标题关键词"
          >
            <template #append>
              <el-button><i class="i-fe:search" /> </el-button>
            </template>
          </el-input>
        </div>
      </div>
      <div v-infinite-scroll="getHistoryList" class="wh-full">
        <template v-for="item in historyList" :key="item.date">
          <div class="font-size-14">
            <div>
              <i class="i-fe:clock mr-5 align-mid color-primary" />
              <span class="align-mid">
                {{ item.date }}
              </span>
            </div>
            <div><el-divider direction="horizontal" /></div>
          </div>
          <div class="mb-50">
            <template v-for="(detail, index) in item.detail" :key="detail.id">
              <OpenTag
                :to="{
                  name: 'ArticleDetail',
                  params: { id: detail.id },
                  query: { title: detail.title },
                }"
              >
                <ArticleItem :item-info="detail" :title-op="true">
                  <template v-if="detail.type === 1" #titlePre>
                    <el-tag size="small" class="mr-5 us">
                      文章
                    </el-tag>
                  </template>
                  <template #footer>
                    <div
                      class="mt-10 flex justify-between font-size-12 line-height-100%"
                    >
                      <div>
                        <span
                          class="op-text cursor-pointer-text-hover"
                          @click="toAuthor(detail.author.id, $event)"
                        >
                          {{ detail.author.nickName }}
                        </span>
                        <el-divider direction="vertical" />
                        <span class="op-text">
                          {{ detail.articleMetric.viewCount || 0 }} 阅读
                          &nbsp;·&nbsp;
                          {{ detail.articleMetric.likeCount || 0 }} 赞
                          &nbsp;·&nbsp;
                          {{ detail.articleMetric.commentCount || 0 }}
                          评论
                        </span>
                      </div>
                    </div>
                  </template>
                </ArticleItem>
              </OpenTag>
              <!-- 只在非最后一项时渲染分隔线 -->
              <el-divider v-if="index < item.detail.length - 1" />
            </template>
          </div>
        </template>
        <el-empty
          v-if="historyList.length === 0"
          description="这里什么也没有"
          class="us"
        />
      </div>
    </AppCard>
  </AppPage>
</template>

<style scoped>
.el-divider--horizontal {
  margin: 10px 0;
}
</style>
